<template>
  <div class="mobile-scheme-framework">
    <Title
      v-slide-up
      title="架构与部署"
      color="#0e0b31"
      size="16"
      bold="700"
      sub-title="Architecture and Deployment"
      sub-color="#878597"
      sub-size="14"
      left="27"
      block="#4580dd"
      block-width="2"
      block-pos="center"
    />
    <img v-slide-plus :src="data.image" />
    <div class="framework-box">
      <div
        v-slide-up
        v-for="(item, index) in data.list"
        :key="index"
        class="framework-item"
      >
        {{ item.introduce }}
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
defineProps({
  data: {
    type: Object,
    default: () => {
      return {
        list: "",
        image: "",
      };
    },
  },
});
</script>
<style lang="scss" scoped>
.mobile-scheme-framework {
  width: 100%;
  background-color: #fff;
  position: relative;
  padding: 1.25rem;
  box-sizing: border-box;
  img {
    width: 100%;
    height: auto;
    margin-top: 1.25rem;
  }
  .framework-box {
    margin-left: 1.25rem;
    padding: 0.625rem;
    .framework-item {
      font-size: 0.875rem;
      letter-spacing: 0;
      color: #808080;
      margin-bottom: 1.25rem;
      position: relative;
      &:last-child {
        margin-bottom: 0;
      }
      &::before {
        content: "";
        position: absolute;
        left: -1.25rem;
        top: 0.3125rem;
        width: 0.5rem;
        height: 0.5rem;
        background: #3266e4;
      }
    }
  }
}
</style>
